<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
  import { message } from "@/utils/message";
  import {
    brandSelectApi,
    categorySelectApi
  } from "@/api/quotedPriceApi";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });

  onMounted(()=> {
    // getBrandSelect();
  })
  const brandSelect = ref()
  const getBrandSelect = async() => {
    if(newFormInline.value.origin !== undefined) {
      const res: any = await brandSelectApi({brandType: 2, origin: newFormInline.value.origin})
      brandSelect.value = res?.result ?? []
      newFormInline.value.brandId = null
    }

  }

</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="配件名称" prop="partName">
          <el-input v-model="newFormInline.partName" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="配件规格" prop="norm">
          <el-input v-model="newFormInline.norm" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="内部型号" prop="code">
          <el-input v-model="newFormInline.code" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <!-- <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="类型" prop="type">

          <el-radio-group v-model="newFormInline.type" @change="getCategorySelect">
            <el-radio :value="item.id" v-for="(item, index) in newFormInline.categoryOption">{{item.name}}</el-radio>
          </el-radio-group>
      	</el-form-item>
      </re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="配件分类" prop="categoryId">
          <el-select
            v-model="newFormInline.categoryId"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in newFormInline.categorySelect"
              :key="index"
              :label="item.name"
              :value="item.categoryId"
            />
          </el-select>
      	</el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="品牌" prop="brandId">
          <div class="flex-bc w-full">

            <el-select
              v-model="newFormInline.origin"
              placeholder="请选择"
              class=" mr-[10px] !w-[100px]"
              clearable
              @change="getBrandSelect"
            >
              <el-option
                label="国产"
                :value="0"
              />
              <el-option
                label="进口"
                :value="1"
              />
            </el-select>
            <el-select
              v-model="newFormInline.brandId"
              placeholder="请选择"
              class="w-full"
              clearable
            >
              <el-option
                v-for="(item, index) in brandSelect"
                :key="index"
                :label="item.brandName"
                :value="item.brandId"
              />
            </el-select>
          </div>

      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="价格(元)" prop="price">
          <el-input-number
          	v-model="newFormInline.price"
          	class="!w-full"
          	:min="0"
            :controls="false"
          	controls-position="right"
            :precision="3"
            :step="100"
            style="text-align: left;"
            placeholder="请输入"
          />
      	</el-form-item>
      </re-col>
     <!-- <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="内部型号" prop="inmark">
          <el-input v-model="newFormInline.inmark" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="供应商" prop="supplierId">
          <el-select
            v-model="newFormInline.supplierId"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in newFormInline.supplierSelect"
              :key="index"
              :label="item.supplierName"
              :value="item.supplierId"
            />
          </el-select>
      	</el-form-item>
      </re-col>
    </el-row>
	</el-form>
</template>
<style scoped>
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 1px 11px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
</style>
